<template>
  <div
    class="map-select"
    :class="{ 'map-select-hover': ready }"
    :style="
      `width: ${
        ready ? 86 * data.length + (data.length - 1) + 10 + 'px' : '86px'
      }`
    "
    @mouseover="mouseover"
    @mouseout="mouseout"
  >
    <div
      class="image-item"
      :style="getStyle(item, index)"
      v-for="(item, index) in data"
      :key="index"
      @click="handleSelect(item, index)"
    >
      <span :class="{ active: active === index }">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ready: false,
      data: [
        {
          name: "海陆",
          type: "mixin",
          img: "/img/map/satellite.png",
        },
        {
          name: "海图",
          type: "map",
          img: "/img/map/map.png",
        },
      ],
      active: 0,
    };
  },
  methods: {
    getStyle(item, index) {
      let style = "";
      if (this.ready) {
        style += `background-image: url(${item.img});`;
        style += `left: ${index * 86 + (index + 1) * 10}px;`;
      } else {
        if (index === 0) {
          style += `background-image: url(${item.img});`;
        } else {
          style += `background-image: url(/img/map/shadow_${index}.png);`;
        }
        style += `left: ${(index + 1) * 10}px;`;
      }
      style += `z-index: ${this.data.length - index}`;
      return style;
    },
    mouseover() {
      this.ready = true;
    },
    mouseout() {
      this.ready = false;
    },
    handleSelect(row, index) {
      this.active = index;
      this.$emit("changeMap", row.type);
    },
  },
};
</script>

<style scoped lang="scss">
.map-select {
  position: absolute;
  bottom: 20px;
  left: 20px;
  border-radius: 3px;
  display: flex;
  width: 86px;
  height: 60px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0);
  box-sizing: content-box;
  transition: width 0.5s;
  .image-item {
    transition: left 0.5s;
    width: 86px;
    height: 60px;
    margin-right: 10px;
    position: absolute;
    top: 0;
    border-radius: 3px;
    box-shadow: 1px 1px 3px #999;
    span {
      color: #fff;
      position: absolute;
      bottom: 1px;
      left: 1px;
      font-size: 12px;
      padding: 2px;
      border-radius: 3px;
    }
    .active {
      background-color: #409eff;
    }
    &:last-of-type {
      margin: 0;
    }
  }
}
.map-select-hover {
  bottom: 10px;
  left: 20px;
  background-color: #fff;
  width: auto;
  padding: 10px;
  .image-item {
    top: 10px;
  }
}
</style>
